<template>
  <!-- 访客记录-详情 -->
  <public-modal
    :footer="false"
    :publicVisible="publicVisible"
    :title="title"
    cancelContext="拒绝"
    confirmContext="通过"
    modalStyle="detailModal"
    width="900px"
    @cancel="cancel"
    @handleOk="handleOk"
  >
    <div slot="content">
      <div class="detail-container">
        <div class="icon">
          <div class="sub-icon"></div>
        </div>

        <div class="timeline">{{ detail.createTime }}</div>

        <div class="detail-content">
          <div class="title">{{ detail.riskTitle }}</div>
          <div class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">隐患类型:</span>
              <span class="flex-item-content value f1">{{ get_dict_type(risk_type, detail.riskType) }}</span>
            </div>
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">隐患来源:</span>
              <span class="flex-item-content value f1">{{ detail.riskSource == 1 ? '群众举报' : '民警发现' }}</span>
            </div>
          </div>

          <div class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">发现时间:</span>
              <span class="flex-item-content value f1">{{ detail.discoveryTime }}</span>
            </div>
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">人员姓名:</span>
              <span class="flex-item-content value f1">{{ detail.userName }}</span>
            </div>
          </div>

          <div class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">发现地点:</span>
              <span class="flex-item-content value f1">{{ detail.discoverySite }}</span>
            </div>
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">联系方式:</span>
              <span class="flex-item-content value f1">{{ detail.userMobile }}</span>
            </div>
          </div>

          <div class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">上报单位:</span>
              <span class="flex-item-content value f1">{{ detail.policeAgencyName }}</span>
            </div>
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">所属辖区:</span>
              <span class="flex-item-content value f1">{{ detail.policeJurisdictionName || '暂无' }}</span>
            </div>
          </div>

          <div class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">隐患描述:</span>
              <span class="flex-item-content value f1">{{ detail.riskDescription }}</span>
            </div>
          </div>

          <div v-if="risk_photo.length" class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">隐患图片:</span>
              <span class="flex-item-content value f1 img-wrap">
                <img
                  v-for="item in risk_photo"
                  :id="item"
                  :key="item"
                  :data-original="imgPrefix + item"
                  :src="imgPrefix + item"
                  class="click-img"
                  @click="werImg(item)"
                />
              </span>
            </div>
          </div>
        </div>
      </div>

      <div v-if="handleStatus >= 1 && claimStatus == 2" class="detail-container">
        <div class="icon">
          <div class="sub-icon"></div>
        </div>

        <div class="timeline">{{ detail.claimTime }}</div>

        <div class="detail-content">
          <div class="flex flex-wrap">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">处理民警:</span>
              <span class="flex-item-content value f1">{{ detail.policeName }}</span>
            </div>
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">警 号:</span>
              <span class="flex-item-content value f1">{{ detail.policeUserNo }}</span>
            </div>
          </div>

          <div class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">联系方式:</span>
              <span class="flex-item-content value f1">{{ detail.policeMobile }}</span>
            </div>
          </div>
        </div>
      </div>

      <div v-if="handleStatus == 2 && claimStatus == 2" class="detail-container">
        <div class="icon">
          <div class="sub-icon"></div>
        </div>

        <div class="timeline">{{ detail.updateTime }}</div>

        <div class="detail-content">
          <div class="flex flex-wrap">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">处理时间:</span>
              <span class="flex-item-content value f1">{{ detail.processingTime }}</span>
            </div>
          </div>

          <div class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">处理措施:</span>
              <span class="flex-item-content value f1">{{ detail.policeHandleMemo }}</span>
            </div>
          </div>

          <div class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">是否移交:</span>
              <span class="flex-item-content value f1">{{ detail.transferStatus == 1 ? '是' : '否' }}</span>
            </div>
          </div>

          <div v-if="detail.transferStatus == 1" class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">接收单位:</span>
              <span class="flex-item-content value f1">{{ detail.transferDepartment }}</span>
            </div>
          </div>

          <div v-if="detail.transferStatus == 1" class="flex flex-wrap mt-16">
            <div class="flex-item f1 flex">
              <span class="flex-item-title label">接收人:</span>
              <span class="flex-item-content value f1">{{ detail.transferUserName }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div slot="footer"></div>
  </public-modal>
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'
import publicModal from '@/components/publicModal'
import { getAction } from '@/api/manage'
import { ajaxGetDictItems } from '@/api/api'
import { getPrefixImg } from '../../../../utils/util'
export default {
  name: 'detailModal',
  components: { publicModal },
  data() {
    return {
      publicVisible: false,
      title: '线索详情页',
      handleStatus: '',
      claimStatus: '',

      detail: {},
      imgPrefix: '',
      risk_photo: [],
      reply_photo: [],

      risk_type: [],
    }
  },
  methods: {
    show(record, status, handleStatus, claimStatus) {
      let enmu = {
        0: '待核查',
        1: '处理中',
        2: '已处理',
      }
      this.detail = record
      this.handleStatus = handleStatus
      this.claimStatus = claimStatus
      this.title = enmu[status] + this.title
      this.publicVisible = true

      this.getDist()
      this.get_risk_photo(record.id)
    },

    async get_risk_photo(id) {
      this.risk_photo = []
      let { result: risk_photo } = await getAction('/sys/images_path/list', { bizId: id, bizType: 24 })
      risk_photo.forEach((item) => {
        this.risk_photo.push(item.path)
      })

      // this.reply_photo = []
      // let { result: reply_photo } = await getAction('/sys/images_path/list', { bizId: id, bizType: 20 })
      // reply_photo.forEach((item) => {
      //   this.reply_photo.push(item.path)
      // })
    },

    async getDist() {
      let { result: static_server } = await ajaxGetDictItems({ code: 'static_server' })
      this.imgPrefix = getPrefixImg()

      let { result: risk_type } = await ajaxGetDictItems({ code: 'risk_type' })
      this.risk_type = risk_type
    },
    get_dict_type(list, type) {
      let res = list.find((item) => item.value == type)
      if (res && res.title) {
        return res.title
      } else {
        return '暂无'
      }
    },

    werImg(id) {
      const ViewerDom = document.getElementById(id)
      const viewer = new Viewer(ViewerDom, {
        toolbar: true,
        button: true,
        navbar: true,
        title: false,
        url: 'data-original',
        hide: function () {
          viewer.destroy()
        },
      })
      viewer.show()
    },

    handleOk() {
      this.publicVisible = false
    },
    cancel() {
      this.title = '线索详情页'
      this.publicVisible = false
    },
  },
}
</script>
<style lang="less" scoped>
/deep/ .modalCotent {
  padding: 20px 20px;
  border-radius: 0 0 4px 4px;
}

/deep/ .modalFooter {
  height: 0 !important;
}

.detail-container {
  position: relative;
  padding: 0 0 20px 15px;
  border-left: 1px dashed var(--theme-input-border);
  &:last-of-type {
    padding-bottom: 0;
  }

  .icon {
    position: absolute;
    top: 0;
    left: -8px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #104c8a;

    .sub-icon {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #abd5ff;
    }
  }

  .timeline {
    font-size: 14px;
    color: var(--theme-modal-label-value-color);
  }

  .detail-content {
    margin-top: 10px;
    padding: 20px;
    background: var(--theme-content-item-bg);
    border: 0.01rem solid var(--theme-input-border);
    font-size: 14px;
    font-family: PingFang SC, PingFang SC;

    .mt-16 {
      margin-top: 16px;
    }

    .title {
      color: #e8f0ff;
    }
    .label {
      font-weight: 500;
      color: #1388ff;
    }

    .value {
      color: var(--theme-modal-label-value-color);
    }

    .img-wrap {
      min-width: 0;
      img {
        width: 120px;
        height: 80px;
        border-radius: 4px 4px 4px 4px;
        object-fit: cover;
        cursor: pointer;
        margin-right: 10px;
      }
    }
  }
}
</style>
